<!DOCTYPE html>
<html lang="en">
<head>
    <!-- <%-- 管理员管理账号页面 --%> -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="images/icon.ico" type="/image/x-icon"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <title>Account - Orders Management Display System</title>
</head>
<body>
<main>
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false"
         tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Orders Management Display System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.html" class="nav-link link-dark" aria-current="page">
                    Overview
                </a>
            </li>
            <li>
                <a href="account.html" class="nav-link active">
                    Accounts
                </a>
            </li>
            <li>
                <a href="manage.html" class="nav-link link-dark">
                    All Orders
                </a>
            </li>
            <li>
                <a href="query.html" class="nav-link link-dark">
                    Orders Query
                </a>
            </li>
            <li>
                <a href="echarts.html" class="nav-link link-dark">
                    Chart Display
                </a>
            </li>
            <li>
                <a href="file.html" class="nav-link link-dark">
                    File
                </a>
            </li>
        </ul>
        <hr>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <strong id="user_name_text"></strong>
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.html">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li class="dropdown-item" id="logout">
                    Logout
                </li>
            </ul>
            <script type="text/javascript">
                const logoutButton = document.getElementById('logout')
                logoutButton.addEventListener("click", function () {
                    const request = new XMLHttpRequest()
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== "00000") {
                                alert(json.message)
                            }
                            window.location.href = "/"
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/logout", true)
                    request.send()
                })

                window.onload = function () {
                    sendCurrent()
                }

                function sendCurrent() {
                    const request = new XMLHttpRequest()
                    const usernameText = document.getElementById('user_name_text')
                    request.onreadystatechange = function () {
                        if (request.readyState === 4 && request.status === 200) {
                            const json = JSON.parse(request.responseText)
                            if (json.errorCode !== undefined) {
                                alert(json.message)
                                window.location.href = "/"
                                return
                            }
                            usernameText.innerHTML = json.username
                        } else if (request.readyState === 4 && request.status !== 200) {
                            alert(request.status)
                        }
                    }

                    request.open("POST", "/api/user/current", true)
                    request.send()
                }
            </script>
        </div>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            sendCurrent()
            refreshUser()
        }

        function refreshUser() {
            const request = new XMLHttpRequest()
            const userTableBody = document.getElementById('user-table-body')
            request.onreadystatechange = function () {
                if (request.readyState !== 4) {
                    return
                }
                let innerTableHtml = ""
                if (request.status === 200) {
                    const json = JSON.parse(request.responseText)
                    if (json.errorCode !== undefined) {
                        alert(json.message)
                        return
                        // 返回错误信息
                    } // 正常获得json数组
                    for (let i in json) {
                        let user = json[i]
                        innerTableHtml += "<tr>\n" +
                            `                        <td>${user.username}</td>\n` +
                            `                        <td>${user.password}</td>\n` +
                            `                        <td>${user.role}</td>\n` +
                            `                        <td>${user.id}</td>\n` +
                            "                        <td>\n" +
                            "                            <div class=\"btn-group\">\n" +
                            "                                <button class=\"btn btn-outline-primary\" data-bs-toggle=\"modal\"\n" +
                            "                                        data-bs-target=\"#edit_user\" data-bs-userid=\"" + user.id + "\"\n" +
                            "                                        data-bs-username=\"" + user.username + "\">Edit\n" +
                            "                                </button>\n" +
                            "                                <button class=\"btn btn-outline-danger\" data-bs-toggle=\"modal\"\n" +
                            "                                        data-bs-target=\"#delete_user\" data-bs-userid=\"" + user.id + "\"\n" +
                            "                                        data-bs-username=\"" + user.username + "\">Delete\n" +
                            "                                </button>\n" +
                            "                            </div>\n" +
                            "                        </td>\n" +
                            "                    </tr>"
                    }
                    userTableBody.innerHTML = innerTableHtml
                } else {
                    alert(request.status)
                }
            }
            request.open("POST", "/api/user/get")
            request.send()
        }
    </script>

    <div class="d-flex flex-grow-1 p-4 allow-rolling">
        <div class="d-flex flex-column flex-grow-1">
            <div class="d-flex flex-row">
                <h1 class="flex-column flex-grow-1">Accounts</h1>
            </div>
            <div class="flex-grow-1">
                <table class="table table-hover">
                    <thead class="table table-hover">
                    <tr>
                        <th>Username</th>
                        <th>Password</th>
                        <th>Role</th>
                        <th>ID</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody id="user-table-body">
                    </tbody>
                </table>
                <button type="button" class="flex-column btn btn-outline-primary" data-bs-toggle="modal"
                        data-bs-target="#add_user">Add User
                </button>
            </div>
        </div>


        <div class="modal fade" id="add_user">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Add User</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <label for="add_username_input">Username</label><input type="text"
                                                                               class="form-control text-input"
                                                                               name="user_username"
                                                                               id="add_username_input"
                                                                               placeholder="Type a username...">
                        <label for="add_password_input">Password</label><input type="password"
                                                                               class="form-control text-input"
                                                                               name="user_password"
                                                                               id="add_password_input"
                                                                               placeholder="Type a password...">
                        <label for="add_role_select">Role</label>
                        <select class="form-select" name="user_role" id="add_role_select">
                            <option value="USER">User</option>
                            <option value="ADMIN">Admin</option>
                            <option value="GUEST">Guest</option>
                        </select>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary" id="create-user-confirm" data-bs-dismiss="modal">Confirm</button>
                            <button type="reset" class="btn btn-outline-secondary">Reset</button>
                            <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="delete_user">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Delete User</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger">
                            Notice:<br>
                            <strong>You are now going to delete this user from database, please check it again!</strong>
                        </div>
                        <input type="text" id="delete_user_id" hidden value="">
                        <p id="current_username_delete"></p>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal" id="delete-user-confirm">Delete</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="edit_user">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit User</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="text" id="edit_user_id" hidden value="">
                        <div class="alert alert-warning">
                            Notice:
                            <br>If you don't want to change the username or anything else, please just leave it blank.
                            <br><br><strong>Also note: the role must be set manually, otherwise it will be set as an
                            ordinary user.</strong>
                        </div>
                        <p id="current_username_edit"></p>
                        <hr>
                        <label for="edit_username_input">Username</label>
                        <input type="text"
                               class="form-control text-input"
                               name="edit_username"
                               id="edit_username_input"
                               placeholder="Type a new username...">
                        <label for="edit_password_input">Password</label>
                        <input type="password"
                               class="form-control text-input"
                               name="edit_password"
                               id="edit_password_input"
                               placeholder="Type a new password...">
                        <label for="edit_role_select">Role</label>
                        <select class="form-select" name="edit_role" id="edit_role_select">
                            <option value="USER">User</option>
                            <option value="ADMIN">Admin</option>
                            <option value="GUEST">Guest</option>
                        </select>

                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" id="edit-user-confirm">Confirm</button>
                            <button type="reset" class="btn btn-outline-secondary">Reset</button>
                            <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
<script>
    const editUserModal = document.getElementById('edit_user');
    editUserModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const userRow = button.getAttribute('data-bs-userid');
        const userName = button.getAttribute('data-bs-username');
        const userRowInput = document.getElementById("edit_user_id");
        const usernameCurrent = document.getElementById("current_username_edit");
        userRowInput.value = userRow;

        usernameCurrent.innerHTML = "Current username: " + userName;
    })

    const deleteUserModel = document.getElementById("delete_user");
    deleteUserModel.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const userRow = button.getAttribute('data-bs-userid');
        const userName = button.getAttribute('data-bs-username');
        const userRowInput = document.getElementById("delete_user_id");
        const usernameCurrent = document.getElementById("current_username_delete");
        userRowInput.value = userRow;
        usernameCurrent.innerHTML = "Current username: " + userName;
    })

    const createUserButton = document.getElementById("create-user-confirm");
    createUserButton.addEventListener("click", function () {
        const request = new XMLHttpRequest()
        const role = document.getElementById("add_role_select").value
        const username = document.getElementById("add_username_input").value
        const password = document.getElementById("add_password_input").value

        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                const json = JSON.parse(request.responseText)
                if (json.errorCode !== "00000") {
                    alert(json.message)
                    return
                }
                refreshUser()
            } else if (request.readyState === 4 && request.status !== 200) {
                alert("error" + request.status)
            }
        }

        request.open("POST", "/api/user/create")
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(`role=${role}&username=${username}&password=${password}`)

    })

    const editUserButton = document.getElementById("edit-user-confirm");
    const deleteUserButton = document.getElementById("delete-user-confirm");
    editUserButton.addEventListener("click", function () {
        const request = new XMLHttpRequest()
        const id = document.getElementById("edit_user_id").value
        const role = document.getElementById("edit_role_select").value
        const username = document.getElementById("edit_username_input").value
        const password = document.getElementById("edit_password_input").value

        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                const json = JSON.parse(request.responseText)
                if (json.errorCode !== "00000") {
                    alert(json.message)
                    return
                }
                refreshUser()
            } else if (request.readyState === 4 && request.status !== 200) {
                alert("error" + request.status)
            }
        }

        request.open("POST", "/api/user/edit")
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(`role=${role}&username=${username}&password=${password}&id=${id}`)
    })
    deleteUserButton.addEventListener("click", function () {
        const request = new XMLHttpRequest()
        const id = document.getElementById("delete_user_id").value

        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                const json = JSON.parse(request.responseText)
                if (json.errorCode !== "00000") {
                    alert(json.message)
                    return
                }
                refreshUser()
            } else if (request.readyState === 4 && request.status !== 200) {
                alert("error" + request.status)
            }
        }

        request.open("POST", "/api/user/delete")
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(`id=${id}`)
    })

</script>

</body>
</html>
